<template>
  <div class="cart-item" ref="cart-item">
    <div style="display: flex">
      <div class="cart-item__wrap">
        <my-checkbox :value="checked" @change="onChange('checked', $event)" />
        <div class="cart-item__content">
          <div class="cart-item__img">
            <img :src="img" :alt="title" />
          </div>
          <div class="cart-item__right">
            <div class="cart-item__title">
              {{ title }}
            </div>

            <div class="cart-item__footer">
              <div class="cart-item__price">￥{{ price }}</div>
              <number-input :value="num" @change="onChange('num', $event)" />
            </div>
          </div>
        </div>
      </div>
      <my-button
        @click.native="onDelete"
        width="23.4667vw"
        height="auto"
        class="cart-item__delete-btn"
        >删除</my-button
      >
    </div>
  </div>
</template>

<script>
import MyButton from "./MyButton.vue";
import MyCheckbox from "./MyCheckbox.vue";
import NumberInput from "./NumberInput.vue";
import BScroll from "@better-scroll/core"

export default {
  name: "CartItem",
  components: {
    NumberInput,
    MyCheckbox,
    MyButton,
  },
  props: {
    id: { type: Number, required: true },
    title: { type: String, required: true },
    img: { type: String, required: true },
    price: { type: Number, required: true },
    num: { type: Number, required: true },
    checked: { type: Boolean, required: true },
  },
  methods: {
    //   购物车内部发生数据改变，就发送自定义事件给父组件，并且带上最新的数据
    onChange(propName, $event) {
      this.$emit("change", { ...this.$props, [propName]: $event });
    },
    scrollTo(x=0, y=0, time=300) {
      this.bs && this.bs.scrollTo(x, y, time)
    },
    onDelete() {
      this.$confirm({
        title: '您确认要删除该商品吗？',
        confirmText: '删除'
      }).then(() => {
          this.$emit('delete', this.$props)
      }).catch(() => {
          this.scrollTo()
      })

      
    }
  },
  data() {
    return {
      bs: null
    }
  },
  mounted() {
    this.bs = new BScroll(this.$refs['cart-item'], {
      scrollX: true,
      click: true
    })
    // console.log(this.$el)   // 获取组件的根节点dom结构
    // console.log(this.$refs)

    this.bs.on('scrollStart', () => {
      // this.$emit('scroll-start', this)
      this.$eventBus.$emit('cart-item-scroll', this)
    })

    this.$eventBus.$on('cart-item-scroll', $event => {
      if(this !== $event) {
          this.scrollTo()
      }
    })

    // vm.$parent可以获取到父组件的实例  此处就是 App组件的实例
    //  如果app组件触发了  cart-item-scroll事件， 对应的事件回调函数就会被执行
    // this.$parent.$on('cart-item-scroll', $event => {
    //   if(this !== $event) {
    //       this.scrollTo()
    //   }
    // })
  },
  beforeDestroy() {
    this.bs.destroy()
  }
};
</script>

<style lang="scss" scoped>
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750px;
  height: 222px;
  margin: 18px 0;
  background-color: #fff;
  overflow: hidden;
  

  &__wrap {
    display: flex;
    width: 750px;
    padding: 26px 30px;
    align-items: center;
    justify-content: space-between;
    /* flex-shrink: 0; */
    background-color: #fff;
  }

  &__content {
    display: flex;
  }

  &__img {
    width: 170px;
    height: 170px;
    border-radius: 0.8vw;
    vertical-align: middle;
    background-color: #eee;
    overflow: hidden;
    margin: 0 2.6667vw 0 0;
    flex-shrink: 0;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  &__right {
    display: flex;
    min-width: 58.6667vw;
    height: 22.6667vw;
    flex-direction: column;
    justify-content: space-between;
  }

  &__title {
    font-size: 28px;
  }

  &__footer {
    display: flex;
    justify-content: space-between;
  }

  &__price {
    align-self: flex-end;
    font-size: 3.7333vw;
    color: #444444;
  }
}
</style>
